原作者的時鐘版本比較簡易些,對於時間的算式也比較不直覺,
而Alex大大的版本將時鐘做得更細緻,時間算式也更完整。
廢話不多說,現在就開始一起做時鐘吧!
首先可以先將時鐘調整成自己喜歡的樣子,
css的部分我比較喜歡Alex寫的樣式。
所以先來改寫css的部分
需要在時鐘的中間做一個圓形
.clock-face:after {
content:'';
display:block;
width: 30px;
height:30px;
border-radius: 100%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
background-color: #fff;
}
再來,對時針、分針、秒針指定不同樣式
.hand {
position: absolute;
width: 100%;
height: 100%;
}
.second-hand:after{
position: absolute;
content:'';
display:block;
width: 5px;
height: 50%;
background-color: red;
left: 50%;
bottom: 50%;
transform: translate(-50%,0%);
}
.min-hand:after{
position: absolute;
content:'';
display:block;
width: 10px;
height: 40%;
background-color: white;
left: 50%;
bottom: 50%;
transform: translate(-50%,0%);
}
.hour-hand:after{
position: absolute;
content:'';
display:block;
width: 15px;
height: 20%;
background-color: white;
left: 50%;
bottom: 50%;
transform: translate(-50%,0%);
}
css調整完後,來寫JS的部分
1.抓出需要動作的時針、分針、秒針
const secondHand = document.querySelector('.second-hand')
const minHand = document.querySelector('.min-hand')
const hourHand = document.querySelector('.hour-hand')
2.設定時間,new Date()可以直接得到本地標準時間喔
這裡很直覺的可以將時分秒都抓出來
const now = new Date()
const seconds = now.getSeconds()
const mins = now.getMinutes()
const hours = now.getHours()
3.計算旋轉角度
每一秒鐘,秒針需要旋轉幾度
每一秒鐘,分針需要旋轉幾度
每一秒鐘,時針需要旋轉幾度
const secondsDegress = ((seconds / 60) * 360)
const minsDegress = ((mins / 60) * 360)
const hoursDegress = ((hours / 12) * 360)
4.將算好的角度寫入style
secondHand.style.transform = `rotate(${secondsDegress}deg)`
minHand.style.transform = `rotate(${minsDegress}deg)`
hourHand.style.transform = `rotate(${hoursDegress}deg)`
5.將步驟 2.3.4 組合成函式
function setDate() {
const now = new Date()
const seconds = now.getSeconds()
const mins = now.getMinutes()
const hours = now.getHours()
const secondsDegress = ((seconds / 60) * 360)
const minsDegress = ((mins / 60) * 360)
const hoursDegress = ((hours / 12) * 360)
secondHand.style.transform = `rotate(${secondsDegress}deg)`
minHand.style.transform = `rotate(${minsDegress}deg)`
hourHand.style.transform = `rotate(${hoursDegress}deg)`
}
6.設定計時器
setInterval(setDate, 1000)
7.發現重新整理頁面時指針都會在一秒後才到正確位置
所以在執行計時器前,我們需要先手動執行一次setDate()函式
今天的練習完成囉,完整的程式碼請直接點擊下方codePen連結
codePen
或者也可以直接到WES BOS的網站下載打包好的檔案
javascript30